<template>
  <div class="container">
    <div class="swiper">
      <swiper :options="swiperOption" ref="mySwiper" id="mySwiper">
        <swiper-slide
          class="swiper_slide_item"
          v-for="(item, index) in swiperData"
          :key="index"
          ><img :src="item.imgUrl" alt="imgUrl" />
          <p>一 {{ item.title }} 一</p></swiper-slide
        >
      </swiper>
    </div>
  </div>
</template>

<script>
export default {
  name: "PlatformSwiper",
  props: { swiperData: Array },
  data() {
    return {
      swiperOption: {
        initialSlide: 1,
        setWrapperSize: true,
        autoHeight: true,
        slidesPerView: 3,
        spaceBetween: 30,
        centeredSlides: true,
        autoplay: {
          delay: 2000,
          stopOnLastSlide: false,
          disableOnInteraction: true,
        },
        loop: true, //循环播放
        speed: 1000, // 发生页面切换动画时，动画的切换速度
      },
    };
  },
};
</script>

<style lang="less" scoped>
.container {
  margin: 150px auto;
  width: 1280px;
  // 使阴影移出容器
  /deep/.swiper-container {
    overflow-x: visible;
    padding-bottom: 20px;
  }
  /* 隐藏水平滚动条 */
  .swiper-container-horizontal {
    overflow-x: hidden;
  }

  /deep/.swiper_slide_item {
    width: 100%;
    border-radius: 10px;
    overflow: hidden;
    border: 1px solid #ddd;
    box-sizing: border-box;
    img {
      width: 100%;
      height: 235px;
    }
    p {
      margin: 25px auto;
      color: #31c46c;
      font-weight: 600;
      letter-spacing: 3.6px;
    }
  }
  .swiper_slide_item:hover {
    box-shadow: 0px 7px 15px 0px rgba(0, 0, 0, 0.2);
    img {
      transform: scale(1.1);
      transition: 0.5s ease-out;
    }
  }
}
</style>
